import { Vue, Component } from 'vue-property-decorator';
import { Praise } from './canvas';
@Component({
})
export default class PraiseContent extends Vue {
  list = ['🙉', '🙀', '💡', '🤣', '👏', '👍', '🙆‍♀️'];
  thumpUp: any = null;
  thumpContainer: any = null;
  newpraise:any = null;
  canvas:any = null;
  mounted () {
    this.thumpUp = document.getElementById('thumpUp');
    this.canvas = document.getElementById('canvas');
    this.thumpContainer = document.getElementById('thumpUp-content');
    this.newpraise = new Praise();
    this.thumpContainer && this.thumpUp.addEventListener('touchstart', this.handleThump);
    this.canvas && this.thumpUp.addEventListener('touchstart', this.handlePraise);
    // setInterval(() => {
    //   newpraise.start();
    // }, 300);
  }

  /**
   * 点击实现创建元素
   */
  handleThump () {
    console.log(111);
    const num = Math.round(Math.random() * 6);
    const index = Math.round(Math.random() * 2) + 1;
    const d = document.createElement('div');
    d.className = `inner inner${index}`;
    d.innerHTML = this.list[num];
    this.thumpContainer && this.thumpContainer.appendChild(d);
  }

  handlePraise () {
    this.newpraise.start();
  }
}
